<template>
  <div class="personal">
    <PersonalHeader />
    <div class="personal-content">
      <PersonalArea />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import PersonalHeader from '@/views/personal/components/PersonalHeader.vue';
import PersonalArea from '@/views/personal/components/PersonalArea.vue';

export default defineComponent({
  name: 'Personal',
  components: {
    PersonalHeader,
    PersonalArea,
  },
  setup() {
    return {};
  },
});
</script>

<style lang="less" scoped>
.personal {
  background-color: @rb-background-color;
  height: 100vh;
  &-content {
    position: relative;
    height: calc(100% - 48px);
    padding: 24px 64px;
  }
}
</style>
